<template>
  <div>
    <el-input
      v-model="queryModel.query"
      placeholder="请输入内容"
      class="search-input"
    >
      <el-button
        :loading="queryLoading"
        @click="
          queryModel.pagenum = 1;
          getUsersList();
        "
        slot="append"
        icon="el-icon-search"
      ></el-button>
    </el-input>
    <el-button
      type="primary"
      @click="
        model = {};
        visible = true;
      "
      >添加用户</el-button
    >
    <el-table :data="list" border row-key="id">
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="电话" prop="mobile"></el-table-column>
      <el-table-column label="角色" prop="role_name"></el-table-column>
      <el-table-column label="状态">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.mg_state"
            @change="switchState(row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300px">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="mini"
            @click="
              model = { ...row };
              visible = true;
            "
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="deleteUser"
            >删除</el-button
          >
          <el-button type="warning" size="mini">设置角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="
        (v) => {
          queryModel.pagenum = v;
          getUsersList();
        }
      "
      @size-change="
        (v) => {
          queryModel.pagesize = v;
          getUsersList();
        }
      "
      :current-page="queryModel.pagenum"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      :page-size="queryModel.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加修改 -->
    <el-dialog
      :title="title + '用户'"
      :visible.sync="visible"
      :close-on-click-modal="false"
    >
      <el-form label-width="70px" :model="model" :rules="rules" ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input
            :disabled="!!model.id"
            v-model="model.username"
            :maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="!model.id">
          <el-input v-model="model.password" :maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="model.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="model.mobile"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="confirm"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUsers, changeState, addUser, updateUser, delUser } from "api/user";
export default {
  name: "users",
  data() {
    return {
      /**
       * 数据列表
       */
      list: [],
      /**
       *查询loading
       */
      queryLoading: false,
      /**
       * 提交loading
       */
      confirmLoading: false,
      /**
       * 查询模型
       */
      queryModel: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      /**
       * 总条数
       */
      total: 0,
      /**
       * 弹出框是否显示
       */
      visible: false,
      /**
       * 添加修改模型
       */
      model: {},
      /**
       * 规则
       */
      rules: {
        username: [
          { required: true, message: "用户名不能为空" },
          { min: 3, max: 10, message: "用户名长度为3-10位" },
        ],
        password: [
          { required: true, message: "密码不能为空" },
          { min: 6, max: 15, message: "用户名长度为6-15位" },
        ],
        email: [
          { required: true, message: "邮箱不能为空" },
          { type: "email", message: "邮箱格式不正确" },
        ],
        mobile: [
          { required: true, message: "手机不能为空" },
          { pattern: /^1[3-9]\d{9}$/, message: "手机格式不正确" },
        ],
      },
    };
  },
  created() {
    this.getUsersList();
  },
  methods: {
    /**
     * 删除用户
     */
    async deleteUser({ id, username }) {
      let res;
      try {
        res = await this.$myConfirm(`您确定要删除【${username}】嘛？`);
        await delUser(id);
        this.$m.success("删除成功");
        this.getUsersList();
      } catch (error) {}
      res && res();
    },
    /**
     * 提交添加修改
     */
    async confirm() {
      try {
        await this.$refs.form.validate();
        this.confirmLoading = true;
        await (this.model.id ? updateUser : addUser)(this.model);

        this.visible = false;
        this.$m.success(this.title + "成功");
        this.getUsersList();
      } catch (error) {}
      this.confirmLoading = false;
    },
    /**
     * 更改状态
     */
    async switchState(id, mg_state) {
      try {
        await changeState(id, mg_state);
        this.$m.success("状态变更成功");
      } catch (error) {}
    },
    /**
     * 获取用户列表
     */
    async getUsersList() {
      try {
        this.queryLoading = true;
        const { total, users } = await getUsers(this.queryModel);
        this.total = total;
        this.list = users;
      } catch (error) {}
      this.queryLoading = false;
    },
  },
  computed: {
    title() {
      return this.model.id ? "修改" : "添加";
    },
  },
};
</script>

<style scoped lang="scss">
.search-input {
  width: 300px;
  margin-right: 20px;
}
</style>
